<template>
  <div>
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
              ifShow: !!record.id,
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, watch, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './useRecord.data';
  import { getStamListLog, getStamDelLog } from '/@/api/flowManage/flowManage';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'UseRecord',
    components: { BasicTable, TableAction },
    props: {
      title: {
        type: String,
        default: '',
      },
      stampId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      // onMounted(async () => {
      // });
      watch(
        () => props.stampId,
        async () => {
          await nextTick();
          const { setFieldsValue } = await getForm();
          setFieldsValue({ stampId: props.stampId });
          setTimeout(() => {
            reload();
          });
        },
        {
          immediate: true,
        },
      );
      const { createMessage } = useMessage();
      const [registerTable, { reload, setProps, getForm }] = useTable({
        title: '',
        api: getStamListLog,
        columns,
        formConfig: {
          labelWidth: 100,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        searchInfo: {
          op: 'search',
        }, //额外的参数
        beforeFetch: (info) => {
          let newInfo = info;
          if (newInfo.dates && newInfo.dates.length > 0) {
            newInfo.beginDate = newInfo.dates[0];
            newInfo.endDate = newInfo.dates[1];
            delete newInfo.dates;
          }
          return newInfo;
        },
        useSearchForm: true,
        showTableSetting: false,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        immediate: false,
        actionColumn: {
          width: 30,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      const handleDelete = async (record) => {
        console.log('handleDelete');
        try {
          setProps({ loading: true });
          await getStamDelLog({ ids: record.id });
          createMessage.success('操作成功');
          reload();
        } catch (error) {
        } finally {
          setProps({ loading: false });
        }
      };
      watch(
        () => props.title,
        () => {},
      );
      return {
        registerTable,
        handleDelete,
      };
    },
  });
</script>
